import React from "react";
import { Breadcrumb } from "antd";
import "./index.css";

const App: React.FC = () => {
  return (
    <div className="application-wrapper">
      <Breadcrumb
        items={[
          {
            title: <a href="">全部</a>
          },
          {
            title: <a href="">文档类</a>
          }
        ]}
      />

      <div className="all-page-category-title">文档类</div>
      <div className="category-row">
        <div className="category-col">
          <div className="card-img-wrapper">
            <img
              className="card-img"
              src="https://anyshare.aishu.cn/applet/app/work-center/static/media/docRelay.44118f32a08417294ecdfb6d87e45b87.svg"
              alt="icon"
            />

            <div className="card-content">
              <div title="文档流转管理" className="card-title-line">
                文档流转管理
              </div>
              <div
                title="发起基于规则的文档传输"
                className="card-description-line"
              >
                发起基于规则的文档传输
              </div>
            </div>
          </div>
        </div>

        <div className="category-col">
          <div className="card-img-wrapper">
            <img
              className="card-img"
              src="https://anyshare.aishu.cn/applet/app/work-center/static/media/docDomainSync.07d92020939b102b15b433bdbe1dee73.svg"
              alt="icon"
            />

            <div className="card-content">
              <div title="文档收集" className="card-title-line">
                文档收集
              </div>
              <div
                title="向协作者收集文档材料"
                className="card-description-line"
              >
                向协作者收集文档材料
              </div>
            </div>
          </div>
        </div>

        <div className="category-col">
          <div className="card-img-wrapper">
            <img
              className="card-img"
              src="https://anyshare.aishu.cn/applet/app/work-center/static/media/fileTransfer.156966a10d565e6df577bd4b7d0d2fac.svg"
              alt="icon"
            />

            <div className="card-content">
              <div title="文档域同步管理" className="card-title-line">
              文档域同步管理
              </div>
              <div
                title="发起基于规则的文档传输"
                className="card-description-line"
              >
                查看文档域之间的文档同步详情
              </div>
            </div>
          </div>
        </div>

        <div className="category-col">
          <div className="card-img-wrapper">
            <img
              className="card-img"
              src="https://anyshare.aishu.cn/applet/app/work-center/static/media/docRelay.44118f32a08417294ecdfb6d87e45b87.svg"
              alt="icon"
            />

            <div className="card-content">
              <div title="文档流转管理" className="card-title-line">
                查看文档域之间的文档同步详情
              </div>
              <div
                title="发起基于规则的文档传输"
                className="card-description-line"
              >
                发起基于规则的文档传输
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;
